<template>
  <div>
  <div class="fixedTop" v-show="layerDisplay">
    <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
  </div>
    <div class="takeup" v-show="layerDisplay"></div>
  <div class="column column1" :class="{'mxh':iscover}">
      <div class="column-cover" :class="{'hidden':!iscover}">
          <div class="column-cover-more" @click="showmore()">
              <img src="../../assets/libs/atic/images/h5_expanded_icon.png"/>
          </div>
          <div class="column-cover-btn">
              <div class="column-cover-button" @click="openApparticle">打开「扬帆App」查看全文</div>

          </div>
      </div>


    <header>
      <h1 class="article-content-title">{{contents.title}}</h1>

      <div class="dy_all">
        <router-link  :to="{name: 'Index', params: {channelid: contents.channelid}}" style="text-decoration: none;">
        <div class="dy_tx fl"><a href="javascript:void(0)" class="nickname YFout"> <img :src="contents.channellogo"></a></div>
        </router-link>
        <div style="position: relative;">
          <router-link  :to="{name: 'Index', params: {channelid: contents.channelid}}" style="text-decoration: none;">
          <div>

            <div class="dy_link" style="vertical-align: middle;">
              <div class="original_link">

              <a href="javascript:void(0)" class="nickname YFout">
               {{contents.channelname}}
              </a>
            </div>
          </div>
          <div class="date db" style="display: inline-block;vertical-align: middle;font-size: 12px;" id="mydate"> {{contents.displaytime}}</div>
          <div style="display: inline-block;margin-left: 5px;"><img id="articlePvImg" style="vertical-align: middle;width:12px;height:12px;" src="../../assets/libs/atic/view_icon.png" ><span id ="articlePv" class="article_pv">{{contents.pv}}</span> </div>
        </div>
          </router-link>
        <!--  add by jack on 2017/03/24 -->
        <div id="subscribe" @click="openAppchannel">订阅</div>
        <!--  end add -->
      </div>
  </div>

  </header>
  <article class="article-detail">
    <div class="article-relevance">
    </div>
    <div class="mt10"></div>
    <div class="article-detail-inner article-relevance ov" id="article-inner"  v-html="contents.cont" v-lazy-container="{ selector: 'img' }" ref="element">
    </div>
    <div class="mt10"></div>
    <div class="article-relevance">
      <div class="good" v-if="contents.isgood!=0" @click="openApparticle"><img src="../../assets/libs/atic/images/good_hand.png"/><span>{{contents.isgood}}赞</span></div>
    </div>
  </article>
  </div>
    <div id="wrapper" style="padding-top: 0;" :class="{'hidden':iscover}">
    <channel v-if="JSON.stringify(channelInfo)!=='{}'" :info="channelInfo"></channel>
      <remarknew  :topicid="topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                 @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
      <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
    </div>
    <div class="yfh5-plugs_xin">
    <div id="relatedinfo">
      <div class="yfh5-plugs-name-goods" v-for="(item,index) in relaterow" :class="{'top_b_0':index==0}">
          <a :href="item.content.detailShareUrl?item.content.detailShareUrl:item.content.modelurl">
        <img class="img" src="../../assets/libs/atic/images/dian.png">
        <div class="yfh5-plugs-name2">

          {{item.content.title}}

          <img v-if="item.type=='post'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_post_icon.png">
          <img v-if="item.type=='vod'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_video_icon.png">
          <img v-if="item.type=='programme'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_live_live.png">
          <img v-if="item.type=='album'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_album_icon.png">
          <img v-if="item.type=='special'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_special_icon.png">
          <img v-if="item.type=='activity'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_event_icon.png">
          <img v-if="item.type=='goods'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_buy_icon.png">
          <img v-if="item.type=='audio'" class="img_tag" style="width:40px;height:20px; top: 5px; position: relative;" src="../../assets/libs/atic/images/tag_audio_icon.png">

        </div>
          </a>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
    import qs from "querystring"
    import "../../assets/libs/atic/common.css"
    import "../../assets/libs/atic/show.css"
    import "../../assets/libs/atic/style.new.css"

    export default {
        components: {
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
        },
        data:function () {
            return {
                contents: {
                    cont: "",
                    title:"",
                    channellogo:"",
                    channelname:"",
                    displaytime:"",
                    pv:0,
                    channelid:"",
                    isgood:0
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                callApp: {
                    contentType: 7,
                    contentParam: this.$route.params.articleId,
                    infoParams:{
                      channelid:"",
                      channelname:"",
                      url:"",
                      type:"article"
                    }
                },
                channelInfo: {},
                remarkNum:0,
                commentReportData: {

                },
                onTop: true,
                isRealtime:false,
                topicid:"",
                iscover:false,
                relaterow:[],

            }
        },
        mounted: function () {
            let that = this;
   
            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getAssociatedContentList",
                qs.stringify({
                    params: JSON.stringify({
                        id: "article_"+this.$route.params.articleId,
                        idx: 0,
                        size: 6,
                        t:(new Date()).valueOf()
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                  that.relaterow=response.data.data.rows;
            })




            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getArticleDetail",
                qs.stringify({
                    params: JSON.stringify({
                        articleId: this.$route.params.articleId
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {

                //404
                if (response.data.state == 2056){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                /* // 404重定向
                 if (response.data.state === 2012)
                     this.$router.push("/yfs/Dnf");*/
                //console.log(JSON.stringify(response.data.data.content, undefined, 2));
                that.contents.cont =that.letslazyload( response.data.data.content);
                that.contents.title=response.data.data.title;
                that.contents.channellogo=response.data.data.hostUserIcon;
                that.contents.channelname=response.data.data.channelName;
                that.contents.isgood=response.data.data.praiseCount;
                that.contents.displaytime=that.toFullCommonTime(response.data.data.displayTime);
                that.contents.pv=response.data.data.pv;
                that.contents.channelid=response.data.data.channelId;
                that.callApp.infoParams.channelid=response.data.data.channelId;
                that.callApp.infoParams.channelname=response.data.data.channelName;
                that.callApp.infoParams.url=response.data.data.modelUrl;
                that.topicid=response.data.data.topicid;
                if (that.contents.channelid!="") {
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            "params": JSON.stringify({"channelId": that.contents.channelid}),
                            "apiVersion": process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response) => {
                        that.channelInfo = response.data.data;
                    });
                }
                // console.log("+++++++++++++++++++++++++++");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("+++++++++++++++++++++++++++");
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? response.data.data.shareTitle : "文章不存在",
                    content: !(response.data.state == 2056) ? response.data.data.shareContent : "文章不存在",
                    name: !(response.data.state == 2056) ? response.data.data.title : "文章不存在"
                };
                // console.log(meta);
                that.createMetaInfo(meta);
                that.freshTitles(!(response.data.state == 2056) ? response.data.data.shareTitle : "文章不存在");
                // 二次分享
                that.initShareConfig = initShareConf(
                    response.data.data.shareTitle,
                    response.data.data.shareContent,
                    response.data.data.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid:  response.data.data.channelId,
                        contentid: that.$route.params.articleId,
                        name: response.data.data.title,
                        contenttype: "information",
                        type: "article_1",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );

/*

                function dolooknews() {
                    let actionType = "looknews";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.articleId,
                        "imei": "",
                        "extendtag": "",
                        "type": "article_1",
                        "contenttype": "information",
                        "opertime": that.toFullTime(),
                        "contentname":response.data.data.title,
                        "channelid": response.data.data.channelId,
                        "sharetype": "",
                        "newsurl":response.data.data.shareUrl,
                    };
                    shareUrlReport(behaviorData, actionType);
                }
*/


                // 评论comment行为
                that.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: response.data.data.tagId,
                    contentid: that.$route.params.articleId,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: response.data.data.title,
                    extendtag: "",
                    type: "article_1",
                    contenttype: "information",
                    opertime:that.toFullTime(),
                    channelid: response.data.data.channelId
                };
            function  doAccessInformation(){
                let actionType = "accessinformation";
                let behaviorData = {
                    "uid": "",
                    "username": "",
                    "ip":"",
                    "contentid":that.$route.params.articleId,
                    "imei": "",
                    "extendtag": "",
                    "type": "article_1",
                    "contenttype": "information",
                    "opertime": that.toFullTime(),
                    "contentname":response.data.data.title,
                    "channelid": response.data.data.channelId,
                    "sharetype": "",
                    "newsurl":response.data.data.shareUrl,
                };
                shareUrlReport(behaviorData, actionType);
            }
                doAccessInformation();

                function dolooknews() {
                    let actionType = "looknews";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.articleId,
                        "imei": "",
                        "extendtag": "",
                        "type": "article_1",
                        "contenttype": "information",
                        "opertime": that.toFullTime(),
                        "contentname":response.data.data.title,
                        "channelid": response.data.data.channelId,
                        "sharetype": "",
                        "newsurl":response.data.data.shareUrl,
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                setTimeout(function(){ dolooknews();},5000)
            }).then(()=>{
                let height=that.$refs.element.offsetHeight;
                if(height<1000){
                    that.iscover=false;
                }else{
                    that.iscover=true;
                }
            });
        },
        methods: {
            letslazyload : function(contentp) {
                let regexp1 = new RegExp(/(\<img )([^>]*)(src=")([^"]*")([^>]*)(\>)/, 'g');

                 contentp = contentp.replace(regexp1, function(match, p1, p2, p3, p4, p5, p6) {
                  return p1 + p2 + 'data-src="' + p4 + p5 + p6;
               });
                let reg = new RegExp( "http://admin" , "g" )
                contentp=contentp.replace(reg,"//admin");
             return contentp;
             },
            openapp:function(){
                openDownPage(this.callApp.contentType, this.callApp.contentParam,this.callApp.infoParams);
            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            openAppchannel: function () {
               /* let r=confirm("购买专辑将打开【扬帆】app，确认打开吗?");
                if(r==false){
                    return false;
                }else if(r==true){
                    openDownPage(6, this.callApp.infoParams.channelid);
                }*/
                // console.log(JSON.stringify(this.wakeupParam, undefined, 2));
                let that=this;
                that.$dialog.confirm('购买专辑将打开【扬帆】app，确认打开吗?',{
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(6, this.callApp.infoParams.channelid);
                    })
                    .catch(function () {
                        // 点击取消执行
                    });

            },
            openApparticle:function(){
                openDownPage(7, this.callApp.contentParam,this.callApp.infoParams);
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            showmore:function(){
                this.iscover=false;
            }
        }
    }
</script>

<style>
.article-relevance img{
  min-height: 10px;
  display:block;
  margin:0 auto;
  width:100%;
}
.article_pv {
  font-size: 12px;
  color: #999999;
  margin-left: 6px;
  vertical-align: middle;
}


/*add by jack on 2017/03/24*/

#subscribe{
  /*display:none;*/
  right: 0px;
  top: -4px;
  width: 35px;
  text-align: center;
  position: absolute;
  color: #7056f3;
  border-radius: 27.5px;
  padding: 10px;
  background: #F0EBFD;
  height: 6px;
  line-height: 6px;
}
#is_subscribe{
  display:none;
  right: 0px;
  width: 35px;
  text-align: center;
  top: -4px;
  position: absolute;
  color: #B3AFA9;
  border-radius: 27.5px;
  padding: 10px;
  border: 1px solid #EDECEA;
  background: #ffffff;
  height: 6px;
  line-height: 6px;
}
 .article-relevance .good{
   height:16px;
 }
.article-relevance .good span{
  line-height: 20px;
  display: block;
  float: left;
  top: 0;
  height: 16px;
  margin-left: 5px;
  font-size: 0.9rem;
  color:#666;
}

.article-relevance .good img{
  height: 16px;
  display: block;
  float: left;
  width: 16px;
}
  .mxh{
    height:600px;
    overflow: hidden;
  }
  .top_b_0{
    border-top:0px solid #ededed !important;
  }
    .column{
        position: relative;
    }
    .column-cover{
        position: absolute;
        bottom: 0;
        width: 100%;
        background: none;
        left:0;
    }
    .column-cover-more{
        width: 100%;
        height:70px;
        background:linear-gradient(rgba(255,255,255,0.35),rgba(255,255,255,1)) ;
        text-align: center;
    }
.column-cover-more img{
    height:25px;
    position: relative;
    top:55px;
}
    .column-cover-btn{
        width: 100%;
        height:50px;
        background: #fff;
        padding:15px 0;
    }
    .column-cover-button{
        margin:0 15px;
        background: #9852FF;
        color:#fff;
        font-size: 1rem;
        height:2.6rem;
        line-height: 2.6rem;
        border-radius: 1000px;
        text-align: center;
    }
    .yfh5-plugs_xin  a{
        text-decoration: none;
        color:#444;
    }

</style>